<template>
  <div>
    <top-caption :caption="status"></top-caption>
    <template v-if="starMsg !== null">
      <div class="starInfo">
        <div class="photo autoImage">
          <img :src="starMsg.photo">
        </div>
        <div class="info">
            <h3>影星资料</h3>
            <p>{{starMsg.name}}</p>
            <p>{{starMsg.name_en}}</p>
            <p>{{starMsg.sex}}</p>
        </div>
      </div>
      <div class="works">
        <h3>他的作品</h3>
        <div class="work" v-for="work in starMsg.works" @click="gotoMovieMsg(work.id)">
          <div class="photo autoImage">
            <img :src="work.poster">
          </div>
          <div class="info">
            <p>{{work.title}}</p>
            <p>{{work.roles}}</p>
            <p>{{work.year}}</p>
            <p>
              <el-rate
                      v-model="work.rating"
                      disabled
                      text-color="#ff9900"
                      text-template="{value}">
              </el-rate>
            </p>
            <p>{{work.rating}}分{{work.collect_count}}人评价</p>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
    import {getStarMsg} from 'src/api/index'
    import caption from './caption.vue'
    export default {
        components:{ 'top-caption': caption },
        props:{
           id: {
               type: String,
               required: true
           }
        },
        data:function () {
            return {
                status: '',
                starMsg: null
            }
        },
        created: function () {
            let vm = this;
            vm.status = '正在加载...'
            getStarMsg(this.id)
                .then(function (starMsg) {
                    vm.starMsg = starMsg
                    vm.status = starMsg.name_en+ '  ' + starMsg.name
                })
                .catch(function(error){
                    console.log('%c'+error, 'color:red')
                    vm.starMsg = null
                    vm.status = '加载失败'
                })
        },
        computed: {
        },

        methods: {
            goBack: function () {

                this.$router.go(-1)
            },
            gotoMovieMsg: function (id) {
                this.$router.push('/movieMsg/'+ id)
            }
        }
    }
</script>

<style lang="scss" scoped>
  .starInfo{
    background-color: #b4b1b1;
    padding: 10px;

    .photo{
      display: inline-block;
      overflow: hidden;

      width: 150px;
      height: 200px;
    }
    .info{
      display: inline-block;
      overflow: hidden;
      color: #f0eeee;
      margin-left: 10px;

      position: relative;

      h3{
        color: #fff;
        line-height: 1.5;
        font-size: 25px;
      }
      p{
        line-height: 1.5;
        font-size: 20px;
      }
    }
  }
  .works{
    padding: 20px 10px 10px;
    background-color: #E5E9F2;

    h3{
      color: #333;
      font-size: 18px;
    }
    .work {
      white-space: nowrap;
      font-size: 0;
      padding: 20px 0 10px;
      border-bottom: 1px solid #d6d3d3;

      .photo {
        display: inline-block;
        overflow: hidden;
        font-size: 14px;
        width: 65px;
        height: 100px;
      }
      .info{
        display: inline-block;
        overflow: hidden;
        margin-left: 10px;
        font-size: 14px;
        p{
          margin: 5px 0;
        }
      }
    }
  }
</style>